Skip to main content

Masks

Above a mask, we define the display of the navigation tree. Therefore, we offer fixed basic navigations. In addition to the fixed basic navigations, we can create our own navigations. To do this, we select Masks on the left side in the Explorer.

Topbar

Mask list​

When the Masks tab is activated in the Explorer, you'll see an overview of all defined masks for your navigation. You can create your own masks using the Add button (1). To do this, create a new mask with the Add button, and a new entry will appear under burger-menu.

Topbar

By doing this, based on the burger menu mask, you have created a new mask. When you select the new mask, a preview of the mask is displayed again, and on the right side, you will find a sidebar with categories to further determine the appearance of the mask.

General​

In the General category, you will find properties that are the same for all masks.

- Label
Mask Name.

- Navigationtype
Selected base mask. The property can be changed afterward. All properties in the Special category will be reset when switching the base mask.

- Item-Position
Depending on the base mask, the navigation entries can be displayed in various locations. Possible positions are:

  • Topbar
  • Left Sidebar
  • Right Sidebar

- Bar-Element
Determines the element color of the mask elements. Initially, themed is always selected. Themed means that the primary_color_main from the default Project Theme is used as the color here. Clicking on the property will offer a color picker to set a fixed color. The reset button can be used to revert to the theme color.

- Bar-Background
Determines the background color of the mask. Initially, themed is always selected. Themed means that the background_color_basic from the default Project Theme is used as the color here. Otherwise, behaves the same as the Bar Element property.

- Logout-Button
Adds a logout button to the navigation.

- prefixContainer/ centerContainer/ suffixContainer
Each mask offers 3 slots where you can display additional content. Using a dropdown menu, select an element to be added, and use the Add button to add the element to the slot. Now you will see an entry in the slot list where you can adjust additional properties for the element. Currently, we offer the following elements:

  • navigation-label
  • navigation-logo
  • navigation-link

Special​

The Special category depends on the base mask. Here, properties are displayed that are additionally required for the different masks.

Button-Navigation​

In the button navigation, only the first level of the navigation structure can be displayed. Entries are displayed as a button group in a topbar.

Special Properties

  • Underline Elements
    Displays the active navigation point with an underline.
Topbar

Burger-Menu​

In the burger menu, the navigation structure is represented using a popup menu. This allows for easy navigation through deeper navigation structures.

Special Properties

  • Headline
    In banner mode, the entered value is displayed as a title in the top section of the popup.

  • Headline-Image
    Here, a image URL can be specified. In banner mode, the image is used as a background image for the title in the popup. If banner mode is not active, the image is centered in the top section of the popup (e.g., for a company logo).

Topbar